<template>
  <f7-page>
    <f7-navbar :title="`(${$f7route.context.tabIndex === 1 ? '排单': '出单'})${statusText}`" back-link="返回"></f7-navbar>
    <div class="orders-list">
      <div class="order-item" v-for="(item,index) in ordersList" :key="index">
        <div class="title-inner">
          {{statusText}}
        </div>
        <div class="order-details">
          <p>匹配编号: <span>{{item.sn}}</span></p>
          <p>总金额: <span>￥{{item.coin}}</span></p>
          <p>匹配时间: <span>{{$moment(item.add_time * 1000).format('YYYY-MM-DD HH:mm:ss')}}</span></p>
          <p v-if="type === 6 && status !==2">倒计时: <span class="daojishi" v-if="item.daojishi ===0">倒计时结束</span><van-count-down v-else format="剩余 HH时mm分ss秒" :time="item.daojishi * 1000" @finish="item.daojishi = 0" /></p>
          <p v-if="type === 2">剩余匹配金额: <span>￥{{item.uncoin}}</span></p>
          <p v-if="type === 4 || type === 8">投诉方账号: <span>{{item.username}} <f7-link class="iconfont icon-copy" @click="doCopy(item.username)"></f7-link></span></p>
          <p v-if="type === 4 || type === 8">投诉内容: <span>{{item.content}}</span></p>

          <template v-if="type === 5">
            <p>匹配金额: <span>￥{{item.picoin}}</span></p>
            <p>剩余匹配金额: <span>￥{{item.uncoin}}</span></p>
          </template>

          <p v-if="type === 3 || type === 7">状态: <span>{{item.ostatus | statusFilter}}</span></p>
          <template v-if="type !== 2 && type !== 3 && type !== 4 && type !== 5 && type !==7 && type !==8">
            <p>付款时间: <span>{{item.da_time?$moment(item.da_time * 1000).format('YYYY-MM-DD HH:mm:ss'):'无'}}</span></p>
            <p>确认时间: <span>{{item.get_time?$moment(item.get_time * 1000).format('YYYY-MM-DD HH:mm:ss'):'无'}}</span></p>
          </template>


          <f7-button fill class="small" @click="handleConfirm(item.id)" v-if="type ===6 && status ===1">确认收款</f7-button>
          <f7-button fill class="small" v-if="type === 6 && item.daojishi === 0" @click="openTousuModal(item.id)">我要投诉</f7-button>
          <f7-button v-if="type !== 2 && type !== 4 && type !== 5 && type!==6 && type!==7 && type !== 8" fill class="small" @click="viewPayInfo(item.id)">{{status === 0 ? '现在付款' : '付款信息'}}</f7-button>

        </div>
      </div>
    </div>

    <no-content-tips v-if="ordersList.length === 0"></no-content-tips>


    <f7-panel class="pay-info-panel" right :opened="detailsPanel" @panel:closed="detailsPanel = false">
      <f7-view>
        <f7-page>
          <div class="container-box">
            <div class="block-div">
              <h3>付款信息</h3>
              <p>付款信息: <span>{{payInfo.sn}}</span></p>
              <p>匹配金额: <span>￥{{payInfo.coin}}</span></p>
            </div>
            <div class="block-div">
              <p class="no-padding">收款账户</p>
              <p>账号: <span>{{tabIndex === 2 && type===6 && status === 2?payInfo.username : payInfo.bank.bankcard}}</span></p>
              <template v-if="type!== 6">
                <p>收款方式: <span>{{payInfo.bank.name}}</span></p>
                <p>收款账户名称: <span>{{payInfo.bank.username}}</span></p>
              </template>
            </div>
            <div class="block-div no-border">
              <h3>打款凭证</h3>
              <div class="pingzheng-box">
                <template v-if="status === 0">
                  <input type="file" @change="handleUpload">
                  <span v-if="!imgUrl">请上传打款凭证</span>
                </template>
                <img :src="payInfo.img || imgUrl" alt="" v-if="payInfo.img || imgUrl">
              </div>
            </div>
          </div>

          <f7-toolbar bottom class="panel-bottom-bar" v-if="status === 0">
            <f7-button fill @click="handlePay">立即打款</f7-button>
            <f7-button fill color="red" @click="detailsPanel = false">取消</f7-button>
          </f7-toolbar>
        </f7-page>
      </f7-view>
    </f7-panel>

    <!--投诉弹窗-->
    <custom-modal v-model="tousuModal" slot="fixed" class="tousu-modal">
      <h1>订单投诉</h1>
      <custom-input type="textarea" placeholder="请输入投诉内容" v-model="tousuFormItems.content"></custom-input>
      <custom-input type="file" placeholder="请上传单据图片" @change="handleUploadTousuImg"></custom-input>

      <f7-button fill @click="handleTousu">确定</f7-button>
    </custom-modal>
  </f7-page>
</template>

<script>
  import {getOrdersList, payInfo, pipeiPayInfo, checkDa, confirmShouKuan, buyInfo, plaintOrder} from "../api/home";
  import { upLoadImages } from "../api";

  export default {
    name: "orders-list",
    data() {
      return {
        detailsPanel: false,
        ordersList: [],
        payInfo: {
          bank: {}
        },
        imgUrl: '',
        detailsId: null,
        tousuModal: false,
        tousuFormItems: {
          id: '',
          content: '',
          image: '',
          type: this.$f7route.context.tabIndex
        }
      }
    },
    filters: {
      statusFilter(status) {
        return status === '-3' || status === '-4' ? '申诉中' : status === '1' ? '申诉驳回': '申诉成功'
      }
    },
    computed: {
      tabIndex() {
        return this.$f7route.context.tabIndex;
      },
      type() {
        return this.$f7route.context.type;
      },
      status() {
        return this.$f7route.context.status;
      },
      statusText() {
        const type = this.$f7route.context.type;
        if (type === 1) {
          switch (this.$f7route.context.status) {
            case 0: return '待付款';
            case 1: return '待确认';
            case 2: return '已完成';
          }
        } else if (type === 6) {
          switch (this.$f7route.context.status) {
            case 0: return '待投诉';
            case 1: return '待收款';
            case 2: return '已完成';
          }
        } else if(type === 2 || type === 5) {
          return '匹配中'
        } else if(type === 3 || type === 7) {
          return '投诉';
        } else {
          return '被投诉';
        }
      }
    },
    mounted() {
      console.log(this.$f7route.context.status);
      this.init();
    },
    methods: {
      init() {
        // const type = this.$f7route.context.type;
        const {type, status} = this.$f7route.context;
        getOrdersList({status}, type).then(res => {
          this.ordersList = res.data;
        })
      },
      viewPayInfo(id) {
        this.detailsPanel = true;
        this.detailsId = id;
        if(this.type === 6 && this.status === 2) {
          buyInfo({id}).then(res => {
            this.payInfo = res.data;
          })
          return;
        }
        if (this.status === 0) {
          pipeiPayInfo({id}).then(res => {
            this.payInfo = res.data;
          })
        } else {
          payInfo({id}).then(res => {
            this.payInfo = res.data;
          })
        }
      },
      handleUpload(e) {
        if(e.target.files.length < 1) return;
        const file = e.target.files[0];
        const reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = (res) => {
          upLoadImages({image: res.target.result}).then(resUrl => {
            this.imgUrl = resUrl.url.url;
          })
          // this.payInfo.img = res.target.result;
        }
      },
      handlePay() {
        checkDa({id: this.detailsId, payimg: this.imgUrl}).then(() => {
          this.init();
          this.$store.commit('refreshMyOrder', true)
          this.detailsPanel = false;
        })
      },
      doCopy: function (text) {
        this.$copyText(text).then((e) => {
          this.$toast.success('复制成功')
          console.log(e)
        }, function (e) {
          this.$toast.fail('复制失败')
          console.log(e)
        })
      },
      handleConfirm(id) {
        this.$dialog.confirm({
          title: '提示',
          message: '确定要收款吗？'
        }).then(() => {
          confirmShouKuan({id}).then(() => {
            this.init();
            this.$store.commit('refreshMyOrder', true)
          })
          // on confirm
        }).catch(() => {
          // on cancel
        });
      },
      openTousuModal(id) {
        this.tousuModal = true;
        this.tousuFormItems.id = id;
      },
      handleUploadTousuImg(imgUrl) {
        upLoadImages({image: imgUrl}).then(res => {
          this.tousuFormItems.image = res.url.url;
        })
      },
      handleTousu() {
        console.log(this.tousuFormItems);
        plaintOrder(this.tousuFormItems).then(res => {
          this.tousuModal = false;
          this.$store.commit('refreshMyOrder', true)
          this.init();
        })
      }
    }
  }
</script>

<style scoped lang="scss">
  .orders-list {
    padding: 20px;
    .order-item {
      border: 1px solid $mainColor;
      border-radius: 20px;
      overflow: hidden;
      margin-bottom: $padding;
      .title-inner {
        /*font-size: 24px;*/
        height:89px;
        background:linear-gradient(57deg,rgba(72,166,199,1),rgba(87,225,255,1));
        line-height: 89px;
        padding-left: 32px;
        margin-bottom: 10px;
        color: $fontColor;
        font-size: 26px;
      }
      .order-details {
        padding: $padding;
        p {
          color: $mainColor;
          display: flex;
          justify-content: space-between;
          font-weight: normal;
          padding-bottom: 15px;
          span {
            font-size: 22px;
            display: flex;
            align-items: center;
            .iconfont {
              margin-left: 10px;
            }
          }
          .daojishi, .van-count-down {
            color: red!important;
          }
        }
        .button {
          margin: 10px 0;
          padding: 0 10px;
        }
      }
    }
  }
  .pay-info-panel {
    background: $mainBg;
    color: $mainColor;
    /*padding: $padding;*/
    .container-box {
      padding: $padding;
    }
    .block-div {
      border-bottom: 1px solid $mainColor;
      padding: 30px 0;
      h3 {
        text-align: center;
        padding-bottom: 30px;
      }
      p {
        display: flex;
        justify-content: space-between;
        padding-top: 10px;
      }
      .pingzheng-box {
        height: 300px;
        background: url("../assets/dd_020.png") no-repeat center top;
        background-size: 100% 100%;
        padding: 50px;
        box-sizing: border-box;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        input {
          /*border: 1px solid red;*/
          width: 100%;
          height: 100%;
          position: absolute;
          left: 0;
          top: 0;
          opacity: 0;
        }
      }
    }
    .panel-bottom-bar {
      /deep/ {
        .toolbar-inner {
          padding: 0;
        }
        .button {
          flex: 1;
          border-radius: 0;
        }
      }
    }
  }
  .tousu-modal {
    h1 {
      text-align: center;
      padding: 20px 0;
      font-size: 28px;
    }
    .custom-input {
      margin-bottom: 20px;
    }
  }
</style>